<template>
  <div class="password">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm loginForm"
    >
      <el-form-item label="原密码" prop="passWord">
        <el-input
          type="password"
          show-password
          v-model="ruleForm.passWord"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPass">
        <el-input
          type="password"
          show-password
          v-model="ruleForm.newPass"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认新密码" prop="rePass">
        <el-input
          type="password"
          show-password
          v-model="ruleForm.rePass"
          autocomplete="off"
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "PassWord",
  data() {
    /* var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      }
    }; */
    var validatePass2 = (rule, value, callback) => {
      // console.log(value, "验证器");
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.newPass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        passWord: "",
        newPass: "",
        rePass: "",
      },
      rules: {
        passWord: [
          { required: true, message: "请输入原密码", trigger: "change" },
        ],
        newPass: [
          { required: true, message: "请输入新密码", trigger: "change" },
          {
            min: 6,
            max: 18,
            message: "长度在 6 到 18 个字符",
            trigger: "blur",
          },
          {
            pattern: /^\w*$/, //密码验证
            message: "请输入字母、数字或者_",
            trigger: ["change", "blur"],
          },
          // { validator: validatePass, trigger: "blur" },
        ],
        rePass: [
          {
            required: true,
            message: "请确定新密码",
            trigger: "blur",
          },
          { validator: validatePass2, trigger: "blur" },
        ],
      },
    };
  },
  computed: {},
  watch: {},

  methods: {},
  created() {},
  mounted() {},
  components: {},
};
</script>
<style scoped>
</style>